<template>
    <div>
        <global-tables
            @changePage="handleChangePage"
            :total="total"
            @handleAllSelect="handleAllSelect"
            :list="list"
            :loading="loading"
            :columns="columns"
            :current="search.Page"
        >
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div>
                        <div>
                            <Button
                                v-if="isAddBtn"
                                class="features-btn"
                                @click="handleBtnClick(null,'add')"
                            >
                                <Icon type="md-add" size="18" />新建
                            </Button>
                            <Button
                                v-if="isProhibit"
                                class="features-btn btn-auto-m"
                                @click="handleBtnClick(null,'off')"
                            >
                                <Icon type="ios-lock-outline" size="17" />停用
                            </Button>
                            <Button
                                v-if="isProhibit"
                                class="features-btn btn-auto-m"
                                @click="handleBtnClick(null,'on')"
                            >
                                <Icon type="ios-unlock-outline" size="17" />启用
                            </Button>
                        </div>
                    </div>
                    <div class="table-top-wrap-bottom">
                        <div>
                            <input
                                type="text"
                                style="width:230px;"
                                class="style-input"
                                @keyup.enter="handleSearch"
                                v-model="search.keyword"
                                placeholder=" 请输入会员名称"
                            />
                            <i-input style="display:none"></i-input>
                        </div>
                        <div>
                            <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                        </div>
                    </div>
                </div>
            </Form>
        </global-tables>
        <Modal :mask-closable="false" v-model="isModal" :title="ModalTitle" width="700">
            <div v-if="isModal">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="100">
                    <Row>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="会员">
                                <Select
                                    :disabled="single"
                                    filterable
                                    :remote-method="remoteMethod1"
                                    v-model="formItem.RealName"
                                    v-if="isSelect"
                                    style="width:100%"
                                >
                                    <Option
                                        @click.native="handleOption(item)"
                                        v-for="item in userData"
                                        :value="item.RealName"
                                        :key="item.ID"
                                    >{{ item.RealName }}</Option>
                                </Select>
                            </FormItem>
                        </i-col>

                        <i-col :lg="{ span: 24}">
                            <FormItem label="任务名称" prop="Title">
                                <i-input v-model="formItem.Title" placeholder="请输入任务名称"></i-input>
                            </FormItem>
                        </i-col>

                        <i-col :lg="{ span: 12}">
                            <FormItem label="开始时间" prop="BeginTime">
                                <DatePicker
                                    type="datetime"
                                    style="width:100%"
                                    v-model="formItem.BeginTime"
                                    placeholder="请选择日期"
                                ></DatePicker>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="结束时间" prop="EndTime">
                                <DatePicker
                                    type="datetime"
                                    style="width:100%"
                                    v-model="formItem.EndTime"
                                    placeholder="请选择日期"
                                ></DatePicker>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="获得积分" prop="AddPoint">
                                <i-input v-model="formItem.AddPoint" placeholder="请输入完成任务得到的积分"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 12}">
                            <FormItem label="是否重复">
                                <RadioGroup v-model="formItem.IsForever">
                                    <Radio label="1">重复</Radio>
                                    <Radio label="0">单次</Radio>
                                </RadioGroup>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 24}">
                            <FormItem label="全部会员">
                                <Checkbox v-model="single"></Checkbox>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button size="large" @click="handleClose">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
/**
 * 会员列表
 */
import { cyclicRouting, getdate } from '@/util'
import { getModulePermission } from '@/api/user'
import {
    getTablesList,
    addTablesItem,
    getUserTablesListData,
} from './service'
import GlobalTables from '@/components/GlobalTables'

export default {
    name: 'usersList',
    components: {
        GlobalTables,
    },
    data() {
        return {
            list: [],
            cityValue: [],
            cityList: [],
            itemId: 0,
            allSelectArr: null,
            loading: true,
            formItem: {},
            isSelect: true,
            single: true,
            ruleValidate: {
                AddPoint: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                EndTime: [
                    {
                        required: true,
                        type: 'date',
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                BeginTime: [
                    {
                        required: true,
                        type: 'date',
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ],
                Title: [
                    {
                        required: true,
                        message: '请输入完整信息',
                        trigger: 'change'
                    }
                ]
            },
            isEdit: false,
            isAddBtn: false,
            isProhibit: false,
            total: 0,
            isModal: false,
            ModalTitle: '新建会员',
            search: {
                keyword: '',
                pageindex: 1,
                pagesize: 10
            },
            userColumns: [
                {
                    title: '会员姓名',
                    key: 'RealName'
                }
            ],
            userData: [],
            columns: [
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title: '会员姓名',
                    key: 'RealName'
                },
                {
                    title: '任务名称',
                    key: 'Title'
                },
                {
                    title: '完成任务积分',
                    key: 'AddPoint'
                },
                {
                    title: '重复',
                    width: 80,
                    key: 'IsForever',
                    render: (h, params) => {
                        const { IsForever } = params.row
                        if (IsForever == 1) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'success',
                                        text: '是'
                                    }
                                })
                            ])
                        } else if (IsForever == 2) {
                            return h('div', [
                                h('Badge', {
                                    props: {
                                        status: 'processing',
                                        text: '否'
                                    }
                                })
                            ])
                        }
                    }
                },
                {
                    title: '任务开始时间',
                    width: 140,
                    render: (h, params) => {
                        return h('div', [
                            params.row.BeginTime != '1970-01-01 00:00:00' &&
                                h(
                                    'span',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        }
                                    },
                                    getdate(
                                        new Date(params.row.BeginTime).getTime()
                                    )
                                )
                        ])
                    }
                },
                {
                    title: '任务结束时间',
                    width: 140,
                    render: (h, params) => {
                        return h('div', [
                            params.row.EndTime != '1970-01-01 00:00:00' &&
                                h(
                                    'span',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        }
                                    },
                                    getdate(
                                        new Date(params.row.EndTime).getTime()
                                    )
                                )
                        ])
                    }
                },
                {
                    title: '操作',
                    width: 70,
                    align: 'center',
                    render: (h, params) => {
                        const { isEdit } = this
                        return h('div', [
                            isEdit &&
                                h(
                                    'Button',
                                    {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            background: '#5ab1ef',
                                            border: 'none',
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.handleBtnClick(
                                                    params.row,
                                                    'edit'
                                                )
                                            }
                                        }
                                    },
                                    '修改'
                                )
                        ])
                    }
                }
            ]
        }
    },
    methods: {
        /* 关闭对话框 */
        handleClose() {
            this.isModal = false
        },
        /* 提交 */
        handleSubmit(name) {
            
            const { formItem, itemId } = this

            this.$refs[name].validate(valid => {
                if (valid) {
                    let data = {
                        ...formItem,
                        ID: itemId
                    }
                    if (this.single) {
                        data.UserID = 0
                    } else {
                        if (!data.UserID) {
                            this.$Message.error('请选择会员')
                            return
                        }
                    }
                    addTablesItem(data).then(res => {
                        if (res.state == 'success') {
                            this.$Message.success('操作成功')
                            this.isModal = false
                            this.getTablesListData()
                        } else {
                            this.$Message.error(res.message)
                        }
                    })
                }
            })
        },
        handleOption(item) {
            this.formItem.UserID = item.ID
        },
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search
            getTablesList(data).then(res => {
                this.list = res.data.rows
                this.loading = false
                this.total = res.data.records
            })
        },
        remoteMethod1(query) {
            if (query !== '') {
                setTimeout(() => {
                    getUserTablesListData({
                        keyword: query
                    }).then(res => {
                        this.userData = res.data.rows
                    })
                }, 200)
            } else {
                this.userData = []
            }
        },

        getUserTablesListData() {
            getUserTablesListData().then(res => {
                this.userData = res.data.rows
            })
        },
        /* 表格查询 */
        handleSearch() {
            this.loading = true
            this.getTablesListData()
        },
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true
            if (type == 'page') {
                this.search.pageindex = page
                this.getTablesListData()
            } else {
                this.search.pagesize = page
                this.getTablesListData()
            }
        },
        /* 对话框 */
        handleBtnClick(item, type) {
            this.ModalTitle = '新建会员'
            this.formItem = this.initFormItem()
            if (type == 'edit' || type == 'add') {
                this.itemId = 0
                this.cityValue = []
                if (type == 'edit') {
                    this.itemId = item.ID
                    this.ModalTitle = '编辑任务'
                    this.formItem = item
                }
                this.formItem.AddPoint = this.formItem.AddPoint =
                    this.formItem.AddPoint + ''
                this.formItem.IsForever = this.formItem.IsForever =
                    this.formItem.IsForever + ''
                if (this.formItem.UserID == 0) {
                    this.single = true
                } else {
                    this.single = false
                }
                this.isModal = true
            }
        },
        /* 表单数据 */
        initFormItem() {
            return {
                RealName: '',
                IsForever: '1'
            }
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = []
            for (let item in list) {
                arr.push(list[item].ID)
                arr.join(',')
            }
            arr = arr.join(',')
            this.allSelectArr = arr
        }
    },
    mounted() {
        /* 获取菜单的id */
        cyclicRouting(
            JSON.parse(sessionStorage.getItem('user')).menuList,
            this.$route,
            id => {
                /* 按钮权限请求 */
                getModulePermission({
                    roleid: JSON.parse(sessionStorage.getItem('user')).roleid,
                    moduleid: id
                }).then(res => {
                    /* 按钮权限赋值 */
                    for (let item in res.data) {
                        if (res.data[item].name == 'add') {
                            this.isAddBtn = true
                        } else if (res.data[item].name == 'onoff') {
                            this.isProhibit = true
                        } else if (res.data[item].name == 'edit') {
                            this.isEdit = true
                        }
                    }
                    /* 列表请求 */
                    this.getTablesListData()
                    this.getUserTablesListData()
                })
            }
        )
    }
}
</script>

<style>
</style>
